import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

const user = {
    name: 'Hedy Lamarr',
    imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
    imageSize: 90,
    isLogin: false
};

const products = [
    { title: 'Cabbage', id: 1 },
    { title: 'Garlic', id: 2 },
    { title: 'Apple', id: 3 },
];

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            <code>开启你的react之旅吧！！！</code>
            <Display/>
            <MyProduct/>
        </p>
        <a
          className="App-link"
          href="https://liuche17.cn"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

function MyButton() {
    const [count, setCount] = useState(0)
    function onClick1() {
        setCount(count + 1)
    }

    function onClick2() {
        alert("you are clicking me!!!")
    }

    function onClick3() {
        console.log("you are clicking me???")
    }
  return (
      <>
          <br/>
          <button onClick={onClick1}>click {count} Times</button>
          <button onClick={onClick2}>I'm a button</button>
          <button onClick={onClick3}>I'm a button</button>
      </>

  );
}

function Profile() {
    return (
        <>
            <h1>{user.name}</h1>
            <img
                className="avatar"
                src={user.imageUrl}
                alt={'Photo of ' + user.name}
                style={{
                    width: user.imageSize,
                    height: user.imageSize
                }}
            />
        </>
    );
}

function Display() {
    // 第一种写法
    // let content
    // if (user.isLogin) {
    //     content =  <Profile/>
    // } else {
    //     content = <MyButton/>
    // }
    // return(
    //     <>
    //         {content}
    //     </>
    // )

    // 第二种写法
    return(
        <>
            {user.isLogin ? <Profile/> : <MyButton/>}
        </>
    )
}



function MyProduct() {
    const itemList = products.map(item =>
        <li key={item.id} >
            {item.id}---{item.title}
        </li>
    )

    return(
        <>
            <ul>{itemList}</ul>
        </>
    )
}

export default App;
